<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Google Map</title>
		<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQeejYX3gIUdXFLbTm_C1OxQWg8cXU2FEkBM-MM28MjY_cDDQnBTgRowFnizg7H3VVGFLcMeu-l5iKA" type="text/javascript"></script>-->
		<!-- <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAVQg3rDaK1wqAIU3HbESicBQmu5fp3sAvyznptvti8wPtHpPiJhQnKlVhh4oqvIbo6fEZsUQ8NWqU5Q" type="text/javascript"></script>-->
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAVQg3rDaK1wqAIU3HbESicBQX2fYD_Zu-QomUbavrixnMDKwipBQS9_7CSlaP80HpBoipcuRylKDFtw" type="text/javascript"></script>

		<script src="http://kreeed2.com/modules/systemapi/templates/default/js/jquery-1.4.2.min.js" type="text/javascript"></script>
		<link type="text/css" rel="Stylesheet" media="screen" href="http://kreeed2.com/modules/systemapi/templates/default/css/opacityWindow.css"/>
		<script src="http://kreeed2.com/modules/front/templates/default/js/map.js" type="text/javascript"></script>
		<script src="http://kreeed2.com/modules/front/templates/default/js/extinfowindow.js" type="text/javascript"></script>
		
		<style type="text/css">
				body{
					margin:0;
					font-family: Verdana, Tahoma,  sans-serif;
					font-size: 10px;
					color:#666666;
				}
				.txtFont{
					font-family: Verdana, Tahoma,  sans-serif;
					font-size: 10px;
					color:#666666;
				}
				.text {
					  padding: 4px;
					  font-size: 1em;
					  border-radius: 2px;
					  -moz-border-radius: 2px;
					  -webkit-border-radius: 2px;
					  font-family: "Helvetica Neue";
					  border: 1px solid #cccccc;
					  border-color: #aaaaaa #dddddd #dddddd #aaaaaa;
					  margin-top: 0; 
				}
				/* css กำหนดความกว้าง ความสูงของแผนที่ */
				#map { 
					position:relative;
					width:100%;
					height:300px;
					margin:auto;
					border: 1px solid silver;
				}
				/* css สำหรับ div คลุม google map อีกที */
				#contain_map{
					position:relative;
					width:100%;
					height:250px;
					margin:auto;	
					margin-top:0px;
				}

				#search_location{
					position:absolute;	
					top:10px;
					left:15px;
					box-shadow: inset 1px 1px 2px #555555;
					-moz-box-shadow: inset 1px 1px 2px #555555;
					-webkit-box-shadow: inset 1px 1px 2px #555555;
					padding-top: 9px !important;
					padding-bottom: 9px !important;
					border: none !important;
					float: left;
					margin-top: 0;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px; 
					 background-color: white;
				}
				#search_place{
					position:absolute;	
					top:10px;
					left:600px;
					box-shadow: inset 1px 1px 2px #555555;
					-moz-box-shadow: inset 1px 1px 2px #555555;
					-webkit-box-shadow: inset 1px 1px 2px #555555;
					padding-top: 9px !important;
					padding-bottom: 9px !important;
					border: none !important;
					/*float: left;*/
					margin-top: 0;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px; 
					 background-color: white;
				}

				#zoom_inout img{
					cursor:pointer;	
				}
				#discover-map #map-loading-box {
					z-index: 1000;
					text-align: center;
					font-weight: bold;
					font-size: 90%;
					margin: 180px 0 0 -30px;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					width: 60px;
					height: 60px;
					left: 50%;
					position: absolute;
					opacity: 0.5;
					filter: alpha(opacity=5);
					background: black url(images/spinner-large-999999.gif) no-repeat 14px 14px; 
				}
				#search_location.text-box {
					  float: none;
					  margin-right: 0;
					  width: 550px; 
					  font-family: Verdana, Tahoma,  sans-serif;
					  font-size: 11px;
					  color:#666666;
				}
				#search_location.text-box input {
						width: 100%; 
						 padding: 4px;
						  font-size: 1em;
						  border-radius: 2px;
						  -moz-border-radius: 2px;
						  -webkit-border-radius: 2px;
						  font-family: "Helvetica Neue";
						  border: 0px solid #cccccc;
						  border-color: #aaaaaa #dddddd #dddddd #aaaaaa;
						  margin-top: 0; 
				}
				#search_location.text-box.focused {
						border-radius: 5px 5px 0 0;
						-moz-border-radius: 5px 5px 0 0;
						-webkit-border-radius: 5px 5px 0 0; 
				}
				#search_location #location_clear_button.clear {
						position: absolute;
						text-indent: -10000px;
						right: 6px;
						top: 13px;
						width: 17px;
						height: 17px;
						background: transparent url(images/clear-search.png) no-repeat; 
				}
				#search_location #location_clear_button.clear:hover {
					background-position: -17px 0; 
				}
				#search_location .text-box label.prompted {
					overflow: hidden;
					white-space: nowrap; }

				#search_place.text-box {
					  float: none;
					  margin-right: 0;
					  width: 385px; 
					  font-family: Verdana, Tahoma,  sans-serif;
					  font-size: 11px;
					  color:#666666;
				}
				#search_place.text-box input {
						width: 100%; 
						 padding: 4px;
						  font-size: 1em;
						  border-radius: 2px;
						  -moz-border-radius: 2px;
						  -webkit-border-radius: 2px;
						  font-family: "Helvetica Neue";
						  border: 0px solid #cccccc;
						  border-color: #aaaaaa #dddddd #dddddd #aaaaaa;
						  margin-top: 0; 
				}
				#search_place.text-box.focused {
						border-radius: 5px 5px 0 0;
						-moz-border-radius: 5px 5px 0 0;
						-webkit-border-radius: 5px 5px 0 0; 
				}
				#search_place #place_clear_button.clear {
						position: absolute;
						text-indent: -10000px;
						right: 6px;
						top: 13px;
						width: 18px;
						height: 18px;
						background: transparent url(images/text-box-search.png) no-repeat; 
				}
				#search_place #place_clear_button.clear:hover {
					background-position: -18px 0; 
				}
				#search_place .text-box label.prompted {
					overflow: hidden;
					white-space: nowrap; }
		</style>
	</head>

	<body onload="load()" onunload="GUnload()">
			<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
					<!--Display Map-->
					<tr height="300" valign="top">
						<td colspan="2">
								<div id='discover-map'>
								<div id='map-loading-box'></div>
								<div id="contain_map">
									<div id="map" ></div>
									<div id="search_location" class="text-box">
											<table width="530px" border="0" cellspacing="0" cellpadding="0">
													<tr height="20">
														<td width="1%">&nbsp;</td>
														<td id="location_promp" class="txtFont" style="display:" onClick="removePromted();" onmouseOver="this.style.cursor='auto';">YOUR LOCATION: <font color="#196473"><strong><a id="txt_location">Nonthaburi, Thailand</a></strong></font></td>
														<td>
																<input type="text" class="text" name="location" id="location"  onClick="removePromted();" onBlur="showPromted();" onkeyUp="if(event.keyCode=='13'){searchLocation();}">		
																<a class="clear" href="#" id="location_clear_button" onclick="go_home();" style="">x</a>
														</td>
													</tr>
											</table>
									</div>
									<div id="search_place" class="text-box">
											<table width="375px" border="0" cellspacing="0" cellpadding="0">
													<tr height="20">
														<td>&nbsp;</td>
														<td id="place_display" class="txtFont" width="98%" style="display:" onClick="removePlace();">SEARCH BY: <font color="#196473"><strong><a id="txt_place">Food,Place,Person</a></strong></font></td>
														<td id="place_search">
																<input type="text" class="text" name="place" id="place"  onBlur="showPlace();" onkeyUp="if(event.keyCode=='13'){searchPlace();}">
																<a class="clear" href="#" id="place_clear_button" onclick="searchPlace();" style="">x</a>
														</td>
													</tr>
											</table>
									</div>

								</div>
								</div>
						</td>
					</tr>
					<tr>
							
					</tr>
			</table>
	</body>
	<script>
		//var markers = [<?=$markers?>];
		function zoomIn(){
				removeDiv();
				var current_zoom=map.getZoom(); // ดึงค่าขนาดการ zoom ปัจจุบัน
				map.setZoom(current_zoom+1);// ตั้งค่าขนาดการ zoom เพิ่มขึ้น +1
				updateMarkers();
		}
		function zoomOut(){
				removeDiv();
				var current_zoom=map.getZoom();
				map.setZoom(current_zoom-1);
				updateMarkers();
		}
		function north_direction(){
				removeDiv();
				var lat = map.getCenter().lat()+1;
				var lng = map.getCenter().lng();
				map.panTo(new GLatLng(lat,lng));
				updateMarkers();
				//map.setZoom(zoom);
		}
		function south_direction(){
			    removeDiv();
				var lat = map.getCenter().lat()-1;
				var lng = map.getCenter().lng();
				map.panTo(new GLatLng(lat,lng));
				updateMarkers();
		}
		function east_direction(){
				removeDiv();
				var lat = map.getCenter().lat();
				var lng = map.getCenter().lng()+1;
				map.panTo(new GLatLng(lat,lng));
				updateMarkers();
		}
		function west_direction(){
				removeDiv();
				var lat = map.getCenter().lat();
				var lng = map.getCenter().lng()-1;
				map.panTo(new GLatLng(lat,lng));
				updateMarkers();
		}
		function go_home(){
				removeDiv();
				map.panTo(new GLatLng(13.72763,100.52345));
				updateMarkers();
		}
	</script>
</html>